<template>
	<view class="">
		<navigationBar :titleName="'会员中心'"></navigationBar>

		<view class="img setPadding  setFont setVertical sethorizontalbetween">

			<view class="vipCard  setOnlyDisplay sethorizontalbetween">

				<view class="setNowrap2 setVertical sethorizontalbetween">

					<view class="setVertical sethorizontalbetween">
						<view class="setWeight setRightMargin setMarginVertical setVerticalCenter" v-if="showName">
							<text class="iconfont icon-vip- " style="font-size: 60rpx;"></text>
							<text>{{showName}}</text>
						</view>
						<text v-if="phone" class="fontSize setMarginVertical" style="float: right;">会员号：{{phone}}</text>
						
					</view>


				</view>
				<view class="setNowrap1 setVertical setDisplayCenter">

					<text style="font-size: 100rpx;">VIP</text>
					<!-- <text class="setMiniFont ">尊贵会员特权专享</text> -->
				</view>
			</view>
			<view class="setVerticalCenter sethorizontalbetween time">
				<text v-if="vipEndTime" class="fontSize setMarginVertical"
					style="float: right;">有效期至：{{$u.timeFormat(vipEndTime, 'yyyy年mm月dd日')}}</text>
				
				<text v-else> </text>
				
				<navigator class="setVerticalCenter" url="/pagesUser/payRecord">
						<u-icon name="order" color="#fde797"></u-icon>
					<text style="font-size: 28rpx;color:#fde797;">充值记录</text>
					<u-icon name="arrow-right-double" color="#fde797"></u-icon>
				</navigator>
			</view>
		</view>
		<view class="contentBox setPadding" @click="toCharge()">
			<view class="setVerticalCenter sethorizontalbetween">
				<view class="setVerticalCenter">
					<u-icon name="level" color="#f3df94" size="55"></u-icon>
					<text class="setWeight">立即续费</text>
				</view>
				<view class="">
					<u-icon name="arrow-right" color="#f3df94" size="35"></u-icon>
				</view>
			</view>
			<!-- 充值 -->
			<view class=" recharge setwarp">
				<view class="vipPrice" v-for="(item,index) in payPrice" :key="index">
					<text class="setFontColor1" v-if="item.days%7==0">{{item.days/7}}周会员</text>
					<text class="setFontColor1" v-else-if="item.days%31==0">{{item.days/31}}月会员</text>
					<text class="setFontColor1" v-else-if="item.days%365==0">{{item.days/365}}年会员</text>
					<text class="setFontColor1" v-else>{{item.days}}天会员</text>

					<view class="setFont">￥{{item.money/100}}</view>
					<text v-if="item.preMone>0&&item.preMone"
						class="setFontColor1 setMiniFont setTextThrough">￥{{item.preMoney/100}}</text>
					<view v-if="item.difference>0&&item.difference" class="reducetip" style="font-size: 18rpx;">
						立减{{item.difference/100}}元
					</view>
				</view>
			</view>
		</view>
		<view class="setPadding ">
			<view class="setVerticalCenter " style="margin-bottom: 30rpx;">
				<u-icon name="grid" color="#f3df94" size="55"></u-icon>
				<text class="setWeight">会员权益说明</text>
			</view>
			<view class="" style="padding: 0 20rpx;">
				<view style="margin:10rpx 0 40rpx 0;" class="setOnlyDisplay ">
					<view class="setNowrap1 setBigFont setRightMargin">
						<u-icon name="bag" color="#f3df94" size="55"></u-icon>
					</view>
					<view class="setNowrap2 setVertical">
						<text class="setWeight setcolor2 ">全国项目实时查询</text>
						<text class="setFontColor1 setFontColor2">实时查询全国招标、中标和中标企业等项目信息</text>
					</view>
				</view>
				<view style="margin:10rpx 0 40rpx 0;" class="setOnlyDisplay ">
					<view class="setNowrap1 setBigFont setRightMargin">
						<u-icon name="more-circle" color="#f3df94" size="55"></u-icon>
					</view>
					<view class="setNowrap2 setVertical">
						<text class="setWeight setcolor2">查询更多企业</text>
						<text class="setFontColor1 setFontColor2">普通用户每天可查询10家企业，会员用户每天可查询更多!</text>
					</view>
				</view>
				<view style="margin:10rpx 0 40rpx 0;" class="setOnlyDisplay ">
					<view class="setNowrap1 setBigFont setRightMargin">
						<u-icon name="phone" color="#f3df94" size="55"></u-icon>
					</view>
					<view class="setNowrap2 setVertical">
						<text class="setWeight setcolor2">获得企业详情</text>
						<text class="setFontColor1 setFontColor2">会员可查看企业的详情信息，企业联系电话、企业中标记录</text>
					</view>
				</view>

			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {

		data() {
			return {
				phone: null,
				vipEndTime: null,
				// 用户昵称
				showName: null,
				// 系统支付规格
				payPrice: null,
				// 当前原价
				currentPrice: 0,
				//当前支付金额
				paymentAmount: 0,
				// 当前选择的支付方式
				payWayType: 0,
				// 当前充值规格
				rechargeList: [{
					// 原价
					originalPrice: 399,
					// 现价
					presentPrice: 199,
					// 期限
					termValidity: '1年',
					// 立减
					difference: '200',
					// 是否选中
					checked: true
				}, {
					// 原价
					originalPrice: 899,
					// 现价
					presentPrice: 399,
					// 期限
					termValidity: '2年',
					// 立减
					difference: '500',
					// 是否选中
					checked: false
				}, {
					// 原价
					originalPrice: 1199,
					// 现价
					presentPrice: 599,
					// 期限
					termValidity: '3年',
					// 立减
					difference: '600',
					// 是否选中
					checked: false
				}]

			}
		},
		beforeMount() {
			this.actualAmount()
			this.getfindPayType()
		},
		onLoad(option) {
			console.log("option", option)
			if (option.showName) {
				this.showName = option.showName
			}
			if (option.vipEndTime) {
				this.vipEndTime = option.vipEndTime
			}
			if (option.phone) {
				this.phone = option.phone
			}
		},
		methods: {
			// 获取系统设置的所有支付规格
			getfindPayType() {
				this.$app.request({
					url: this.$baseApp.api.pay.findPayType,
					method: 'post',
					dataType: 'json',
					success: res => {
						console.log("这里是支付", res)
						if (res.code == 200) {
							this.payPrice = []
							res.data.forEach(item => {
								item.difference = item.preMoney - item.money
								this.payPrice.push(item)
							})

						} else {
							this.$refs.uToast.show({
								message: res.msg,
								type: 'success'
							})
						}

					},

					complete: res => {

					}
				});
			},

			toCharge() {
				// 跳转至会员充值页面
				uni.navigateTo({
					url: '/pagesUser/rember/rember'
				})
			},
			toPay() {
				// 
				// 获取当前时间
				let time = new Date()
				uni.requestPayment({
					"provider": "wxpay",
					"orderInfo": {
						"appid": "wx499********7c70e", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						"noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
						"package": "Sign=WXPay", // 固定值
						"partnerid": "148*****52", // 微信支付商户号
						"prepayid": "wx202254********************fbe90000", // 统一下单订单号 
						"timestamp": time, // 时间戳（单位：秒）
						"sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
					},
					success(res) {
						console.log("这里是微信支付")
					},
					fail(e) {
						console.log('微信支付失败了', e)
					}
				})
			},
			// 当前应支付金额
			actualAmount() {
				this.rechargeList.forEach(item => {
					if (item.checked) {
						this.paymentAmount = item.presentPrice
						this.currentPrice = item.originalPrice
					}
				})
			},

			changeType(item, index) {
				this.rechargeList.forEach((res) => {
					res.checked = false
				})
				item.checked = true
				this.actualAmount()
			}
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.img {
		width: 100%;
		background-color: #00aa8f;
		position: relative;
		font-style: italic;
		.time{
			
			color: #fff8dc;
		
		}
		.fontSize{
			font-size: 28rpx;
		}
		.vipCard {
			color: #fff8dc;
			
			box-sizing: border-box;
			
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contentBox {
		margin-bottom: 10rpx;

		.prisePay {
			position: absolute;
			bottom: 2%;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: center;

			.payDetail {
				width: 90%;
				background-color: #47464a;
				padding: 5rpx 20rpx;

			}
		}

		.recharge {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 20rpx 0;

			.vipPrice {
				border: 1rpx solid #e3dfeb;
				padding: 20rpx 10rpx;
				border-radius: 10rpx;
				align-items: center;
				display: flex;
				flex-direction: column;
				width: 30%;
				box-sizing: border-box;
				background: linear-gradient(to top right, #fff8dc, #fde797);
				margin: 11rpx;

				.reducetip {
					background-color: #47464a;
					color: #fff;
					padding: 3rpx 15rpx;
					border-radius: 10rpx;
					font-size: 16rpx;
				}
			}
		}
	}
</style>
